<html>

<head>
    <meta charset="utf-8" />
    <title>AJAXJS Web UI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../dist/css/base.css" />
    <link rel="stylesheet" type="text/css" href="../common/demo.css" />
    <link rel="stylesheet" type="text/css" href="../../dist/css/widget/expander.css" />
    <script src="https://lib.baomitu.com/vue/2.6.11/vue.js"></script>
</head>

<body>
    <div class="box">
        <h1>Welcome to AJAXJS Web UI</h1>
        <div>
            <menu>
                <span></span>
            </menu>
            <div class="content">
                <h2>展开闭合器 expander</h2>
                <p>常用于展开正文详情。提供过渡效果的图层，如果不需要把 div class="mask" 去掉即可。注意加入容器的 padding 会导致关闭时高度异常。</p>
                <table class="aj-table" align="center">
                    <thead>
                        <tr>
                            <th>属性</th>
                            <th>含义</th>
                            <th>类型</th>
                            <th>是否必填，默认值</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>openHeight</td>
                            <td>展开状态的高度</td>
                            <td>Number</td>
                            <td>n, 200</td>
                        </tr>
                        <tr>
                            <td>closeHeight</td>
                            <td>闭合状态的高度</td>
                            <td>Number</td>
                            <td>n, 50</td>
                        </tr>
                        <tr>
                            <td><code>&lt;slot</code>&gt;</td>
                            <td>正文内容扩展</td>
                            <td>String</td>
                            <td>n</td>
                        </tr>
                    </tbody>
                </table>

                <p>例子：</p>
                <pre class="prettyprint"><xmp><aj-expander :close-height="50">……</aj-expander></xmp></pre>

                <p>演示：</p>
                <div class="expander" style="width: 60%;margin:5% auto;">
                    <aj-expander :close-height="50">
                        Lorem Ipsum，也称乱数假文或者哑元文本， 是印刷及排版领域所常用的虚拟文字。
                        由于曾经一台匿名的打印机刻意打乱了一盒印刷字体从而造出一本字体样品书， Lorem Ipsum从西元15世纪起就被作为此领域的标准文本使用。
                        <div class="mask-layer"></div>
                    </aj-expander>
                </div>

            </div>
            <div class="copyright">
                <div></div>
            </div>
        </div>
    </div>
    <script src="../common/demo.js"></script>
    <script src="../../dist/widget/expander.js"></script>
    <script>
       new Vue({ el: '.expander' });
    </script>
</body>

</html>